<template>
  <div class="container">
    <h2>
      插槽
    </h2>
    <p class="title">
      <slot name="title"></slot>
    </p>
    <slot name="content" :personList="personList"></slot>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

let personList = reactive([{
  name: 'zs',
  age: 14
}, {
  name: 'ls',
  age: 10
}])
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  border: 1px solid #e8e8e8;
  margin: 10px 0;
  border-radius: 4px;
  padding: 20px;

  .title {
    margin-top: 10px;
    color: green;
    font-weight: bold;
    font-size: 18px;
  }
}
</style>
